.opacity(@opacity) {
    opacity: @opacity;

    // IE8 filter
    @opacity-ie: (@opacity * 100);
}
.box-shadow(@x:0px, @y:2px, @blur:5px, @color:#999) {
    -moz-box-shadow: @arguments;
    -webkit-box-shadow: @arguments;
    box-shadow: @arguments;
}
.box-shadow-inset(@x:0px, @y:2px, @blur:5px, @color:#999) {
    -moz-box-shadow: @arguments inset;
    -webkit-box-shadow: @arguments inset;
    box-shadow: @arguments inset;
}
.placeholder(@color:#bcbec0) {
    &::-moz-placeholder {
        color: @color;
    }

    // Firefox
    &:-ms-input-placeholder {
        color: @color;
    }

    // Internet Explorer 10+
    &::-webkit-input-placeholder {
        color: @color;
    }

    // Safari and Chrome
}
.radius(@c:1) {
    -webkit-border-radius: @c !important;
    -moz-border-radius: @c !important;
    border-radius: @c !important;
}

//浮动
.fl(@f:left;) {
    float: @f;
    display: inline;
}
.fr(@f:right) {
    float: @f;
    display: inline;
}

//全局定位
.pos (r) {
    position: relative;
}
.pos (a) {
    position: absolute;
}
.pos (f) {
    position: fixed;
}

//布局
.bc() {
    margin-left: auto;
    margin-right: auto;
}
.bc-d(@w:500px) {
    width: @w;
    .bc();
}
.wh(@w) {
    width: @w;
    height: @w;
}

// 文字垂直居中
.l-h(@h) {
    height: @h;
    line-height: @h;
}

//display
.d-b() {
    display: block;
}
.d-i() {
    display: inline;
}
.d-ib() {
    display: inline-block;
}
.d-ib7() {
    display: inline-block;
    *display: inline;
    *zoom: 1;
}
.d-t() {
    display: table;
}
.d-n() {
    display: none;
}

//font weight
.font-w700() {
    font-weight: 700;
}
.font-wb() {
    font-weight: bold;
}
.font-w400() {
    font-weight: 400;
}
.font-wn() {
    font-weight: normal;
}

//font size
.font-s(@p: 12px) {
    font-size: @p;
}

//添加下划线
.tu() {
    text-decoration: underline;
}
.tn() {
    text-decoration: none;
}
.tl() {
    text-align: left;
}
.text-l() {
    text-align: left;
}
.tc() {
    text-align: center;
}
.text-c() {
    text-align: center;
}
.tr() {
    text-align: right;
}
.text-r() {
    text-align: right;
}

//边框附加内容
.triangle-compatible() {
    width: 0;
    height: 0;
    overflow: hidden;
}

//单独方向
.triangle-b(@w:5px, @color:#ccc) {
    border-style: solid dashed dashed dashed;
    border-color: @color transparent transparent transparent;
    border-width: @w;
    .triangle-compatible();
}
.triangle-l(@w:5px, @color:#ccc) {
    border-style: dashed solid dashed dashed;
    border-color: transparent @color transparent transparent;
    border-width: @w;
    .triangle-compatible();
}
.triangle-t(@w:5px, @color:#ccc) {
    border-style: dashed dashed solid dashed;
    border-color: transparent transparent @color transparent;
    border-width: @w;
    .triangle-compatible();
}
.triangle-r(@w:5px, @color:#ccc) {
    border-style: dashed dashed dashed solid;
    border-color: transparent transparent transparent @color;
    border-width: @w;
    .triangle-compatible();
}

//透明度
.opa(@opacity: 80) {
    opacity: @opacity / 100;
    filter:~"alpha(opacity=@{opacity})";
}
.clearfix() {
    zoom: 1;
    &:before,
    &:after {
        display: table;
        content: "";
        line-height: 0;
    }
    &:after {
        clear: both;
        visibility: hidden;
        height: 0;
    }
}

//老的clearfix方法
//.clear() {
//    zoom: 1;
//    clear: both;
//    &:after {
//        display: block;
//        clear: both;
//        content: "";
//        visibility: hidden;
//        height: 0;
//    }
//}

//文字省略号
// @substract单位为%
.ellipsis-basic() {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -moz-binding: url(ellipsis.xml#ellipsis);
}
.ellipsis(@substract:0) {
    .ellipsis-basic();
    width: 100% - @substract;
}

/*************
生成各种常量class所用的mixin
*************/
//生成宽度
.generate-w(@n, @i: 1) when (@i <= @n) {
    @wi: @i*10;
    @j: @i+1;
    .w@{wi} {
        width: @wi*1px;
    }
    .generate-w(@n, @j);
}

//生成padding-right
.generate-pr(@n,@i:0) when (@i <= @n) {
    @pi: @i*5;
    @j: @i+1;
    .pr@{pi} {
        padding-right: @pi*1px;
    }
    .generate-pr(@n, @j);
}
//生成padding-left
.generate-pl(@n,@i:0) when (@i <= @n) {
    @pi: @i*5;
    @j: @i+1;
    .pl@{pi} {
        padding-left: @pi*1px;
    }
    .generate-pl(@n, @j);
}
//生成padding-bottom
.generate-pb(@n,@i:0) when (@i <= @n) {
    @pi: @i*5;
    @j: @i+1;
    .pb@{pi} {
        padding-bottom: @pi*1px;
    }
    .generate-pb(@n, @j);
}
//生成padding-top
.generate-pt(@n,@i:0) when (@i <= @n) {
    @pi: @i*5;
    @j: @i+1;
    .pt@{pi} {
        padding-top: @pi*1px;
    }
    .generate-pt(@n, @j);
}
//生成padding
.generate-p(@n,@i:0) when (@i <= @n) {
    @pi: @i*5;
    @j: @i+1;
    .p@{pi} {
        padding: @pi*1px;
    }
    .generate-p(@n, @j);
}

//生成margin-right
.generate-mr(@n,@i:0) when (@i <= @n) {
    @pi: @i*5;
    @j: @i+1;
    .mr@{pi} {
        padding-right: @pi*1px;
    }
    .generate-mr(@n, @j);
}
//生成margin-left
.generate-ml(@n,@i:0) when (@i <= @n) {
    @pi: @i*5;
    @j: @i+1;
    .ml@{pi} {
        margin-left: @pi*1px;
    }
    .generate-ml(@n, @j);
}
//生成margin-top
.generate-mt(@n,@i:0) when (@i <= @n) {
    @pi: @i*5;
    @j: @i+1;
    .mt@{pi} {
        margin-top: @pi*1px;
    }
    .generate-mt(@n, @j);
}
//生成margin-bottom
.generate-mb(@n,@i:0) when (@i <= @n) {
    @pi: @i*5;
    @j: @i+1;
    .mb@{pi} {
        margin-bottom: @pi*1px;
    }
    .generate-mb(@n, @j);
}
//生成margin
.generate-m(@n,@i:0) when (@i <= @n) {
    @pi: @i*5;
    @j: @i+1;
    .m@{pi} {
        margin: @pi*1px;
    }
    .generate-m(@n, @j);
}
